<template>
  <view class="category-filter">
    <scroll-view scroll-x class="category-scroll" show-scrollbar="false">
      <view class="category-list">
        <view
          v-for="category in categories"
          :key="category.id"
          class="category-item"
          :class="{ active: selectedCategory === category.id }"
          @click="selectCategory(category.id)"
        >
          <expense-category-icon :icon-name="category.id" :active="selectedCategory === category.id" class="category-icon"></expense-category-icon>
          <text class="category-name">{{ category.name }}</text>
          <text class="category-amount" v-if="categoryStats[category.id] > 0">¥{{ formatAmount(categoryStats[category.id]) }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { EXPENSE_CATEGORIES } from '../stores/expense.js'
import ExpenseCategoryIcon from './ExpenseCategoryIcon.vue'

export default {
  name: 'ExpenseCategoryFilter',
  components: {
    ExpenseCategoryIcon
  },
  props: {
    selectedCategory: {
      type: String,
      default: 'all'
    },
    categoryStats: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      categories: EXPENSE_CATEGORIES
    }
  },
  methods: {
    selectCategory(categoryId) {
      this.$emit('select', categoryId)
    },
    formatAmount(amount) {
      return amount.toFixed(2)
    }
  }
}
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.category-filter {
  margin: 10px 0;
}

.category-scroll {
  width: 100%;
  white-space: nowrap;
}

.category-list {
  display: inline-flex;
  padding: 5px 0;
}

.category-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  margin-right: 10px;
  background-color: #f5f5f5;
  border-radius: 20px;
  transition: all 0.3s;
  
  &.active {
    background-color: #FF8C00;
    color: #fff;
  }
  
  .category-icon {
    margin-right: 6px;
  }
  
  .category-name {
    font-size: 14px;
  }
  
  .category-amount {
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.8;
  }
}
</style>